<template>
  <div id="app">
    <Home :count="count"/>
    {{ count }}
    <button @click="count++">UPDATE</button>
  </div>
</template>

<script>
import Home from "@/components/Home";

export default {
  name: 'App',
  components: {
    Home,
  },
  data() {
    return {
      count: 100,
      show: false,
      student: {
        name: '张三',
        age: 18
      }
    }
  },
  // 创建阶段
  beforeCreate() {
    //  此钩子在Vue组件创建之后，依赖注入，和数据劫持之前
    //  此时还没有配置数据劫持、数据代理、计算属性、方法、事件/侦听器等方法
    //  虚拟DOM也不存在，所以这里不可以对数据做任何处理
    //  但是这里VM是存在的，可以挂载一些方法数据到VM上
    this.$axios = {get: () => 'get'}
  },
  created() {
    // 这个钩子是数据代理和数据劫持之后（可以获取到数据）
    // 这里就可以对数据做一些预先处理操作，但是依旧没有生成虚拟DOM对象，所以和页面的交互暂时不能实现
  },
  // 挂载阶段
  beforeMount() {
    // 个人理解： 虚拟DOM对象就是一个用于描述真实DOM的普通对象
    // 虚拟DOM挂载之前 也就是生成了虚拟DOM对象，但是没有编译成真实DOM
    // (此时页面呈现的是原始el容器的DOM元素,这个节点不能操作DOM)
    // 挂载的过程:把虚拟DOM对象 转为真实 DOM(vm.el),并且把vm.el(Vue 实例使用的根 DOM 元素)替换原始模板中的el

  },
  mounted() {
    // 挂载之后(此时页面呈现的是真正的DOM,此时实例的所有初始化已经结束
    // 在这个生命周期中就进行项目中展示数据的，数据请求初始化操作了
    // 比如(开启定时器,订阅发布,绑定自定义事件,发送初始化数据请求)

    // 如果有子组件 那么 所有子组件执行了 mounted 之后 父组件的 mounted 才会执行
  },
  // 更新阶段
  beforeUpdate() {
    // 这个钩子会在组件受到响应式数据更新之后执行
    // 注意!!!
    // 这里组件的数据已经受到影响并被改变了，如果停住在这里的话，我们会发现数据和视图展示的是不一致
    // 根据新的数据生成新的虚拟DOM,然后经过diff算法比较,更新视图
    console.log('父 beforeUpdate')
  },
  updated() {
    // 这里会在视图更新之后执行
    // 如果有子组件的话，会在所有子组件 mounted 或者 updated 执行完成之后执行
    // 父组件更新之前 => 子组件更新之前 => 子组件更新完成 => 父组件更新完成
    console.log('父 updated')
    // 如果子组件有值依赖于父组件，那么父组件更新会先更新
  },
  // 销毁阶段
  beforeDestroy() {
    // 卸载之前
    // 这个阶段和响应式断开连接，所以操作数据没有意义，
    // 可以做一些逻辑收尾工作，例如，取消订阅，清除定时器，解绑自定义事件
  },
  destroyed() {
    // 这一阶段一般没有任何操作
  },
  methods: {
    update() {
      this.count++
    }
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
